<template>
  <div class="ad-form">
    <el-form size="mini" inline label-position="right" label-width="auto" ref="form" :model="form" v-loading="loading" :disabled="isDisableForm">
      <div class="ad-block">
        <el-row :gutter="10">
          <el-col :span="5">
            <el-form-item label="客户类型：" prop="type" :rules="[{required: true, message: '请选择'}]">
              <ad-status-select v-model="form.type" :dict="dict.customer_type" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="是否月结：" prop="nature" :rules="[{required: true, message: '请选择'}]">
              <ad-status-select v-model="form.nature" :dict="dict.yes_or_no" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" v-if="showCompany">
          <el-col :span="10">
            <el-form-item label="公司名称：" prop="name" :rules="[{required: true, message: '请输入'}]">
              <el-input v-model="form.name" placeholder="请输入"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" v-for="(linkman, index) in form.linkmanList" :key="'linkman' + index">
          <el-col :span="5">
            <el-form-item label="联系人：" :prop="`linkmanList.${index}.name`" :rules="[{required: true, message: '请输入'}]">
              <el-input v-model="linkman.name" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="联系电话：" :prop="`linkmanList.${index}.phone`" :rules="[{required: true, message: '请输入'}]">
              <el-input v-model="linkman.phone" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="城市名称：" :prop="`linkmanList.${index}.city`" :rules="[{required: true, message: '请选择'}]">
              <ad-city-select v-model="linkman.city"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
              <el-button size="mini" @click="delLinkman(index)" v-if="isShowListDelBtn(index, form.linkmanList.length)">删除</el-button>
              <el-button size="mini" @click="addLinkman" v-if="isShowListAddBtn(index)">添加</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="10" v-for="(line, index) in form.lineList" :key="'line' + index">
          <el-col :span="5">
            <el-form-item label="出发地：" :prop="`lineList.${index}.startCode`">
              <ad-city-select v-model="line.startCode"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="目的地：" :prop="`lineList.${index}.destinationCode`">
              <ad-city-select v-model="line.destinationCode"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="车辆名称：" :prop="`lineList.${index}.carType`">
              <el-input v-model="line.carType" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="运输费用：" :prop="`lineList.${index}.transportFee`">
              <el-input v-model="line.transportFee" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" @click="delLine(index)" v-if="isShowListDelBtn(index, form.lineList.length)">删除</el-button>
            <el-button size="mini" @click="addLine" v-if="isShowListAddBtn(index)">添加</el-button>
          </el-col>
        </el-row>
        <div class="line" style="margin-bottom: 12px"></div>
        <el-row>
          <el-col>
            <el-form-item label="上传合同：" prop="contract">
              <ad-upload v-model="form.contract"/>
            </el-form-item>
          </el-col>
        </el-row>

      </div>
    </el-form>
    <div class="op">
      <el-button type="primary" :loading="saving" @click="save">保 存</el-button>
      <el-button type="primary" plain @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import AdStatusSelect from '@/components/AdStatusSelect'
import AdCitySelect from '@/components/AdCitySelect'
import AdUpload from '@/components/AdUpload'
import adForm from '@/mixins/adForm'
import { add, edit, get } from '@/api/relation/company'

class Linkman {}
class Line {}
class Form {
  name = ''
  type = ''
  nature = ''
  linkmanList = [new Linkman()]
  lineList = [new Line()]
}
export default {
  components: { AdStatusSelect, AdCitySelect, AdUpload },
  mixins: [adForm({get, add, edit})],
  dicts: ['customer_type','yes_or_no'],
  data() {
    return {
      form: new Form(),
      reservedOneListItem: {linkmanList: Linkman, lineList: Line},
      showCompany: true,
    }
  },
  watch: {
    'form.type'(val) {
      this.showCompany = val != '3'
    }
  },
  methods: {
    addLinkman() {
      this.form.linkmanList.push(new Linkman())
    },
    delLinkman(index) {
      this.form.linkmanList.splice(index, 1)
    },
    addLine() {
      this.form.lineList.push(new Line())
    },
    delLine(index) {
      this.form.lineList.splice(index, 1)
    },
    afterOpen() {
      // this.reserveOneListItem()
    },
    afterGetDetail() {
      // this.reserveOneListItem()
    },
    // reserveOneListItem('linkmanList', 'lineList') {
      // if (!(this.form.linkmanList && this.form.linkmanList.length == 0)) {
      //   this.$set(this.form, 'linkmanList', [new Linkman()])
      //   this.$set(this.form, 'lineList', [new Line()])
      // }
    // }
  }
}
</script>

<style lang="scss" scoped>

</style>